import React from 'react';
import { CollectionWeek, MONTHS } from 'configs/contributionsCollection';
import moment from 'moment';

import { classnames } from 'utils';

import classes from './ContributionsCollection.module.scss';

export type ContributionsCollectionProps = {
    weeks: CollectionWeek[];
    year: number | string;
};

const cnContributionsCollection = classnames(classes, 'contributionsCollection');

const ContributionsCollection: React.FC<ContributionsCollectionProps> = React.memo(({ weeks, year }) => (
    <div className={cnContributionsCollection()}>
        <table className={cnContributionsCollection('grid')}>
            <thead>
                <tr style={{ height: 15 }}>
                    <td key={0} width={29} />
                    {MONTHS.map((month) => (
                        <td key={month.month} className={cnContributionsCollection('label')} colSpan={month.colspan}>
                            {month.month}
                        </td>
                    ))}
                </tr>
            </thead>
            <tbody>
                {[...new Array(7).keys()].map((weekDay) => (
                    <tr style={{ height: 11 }} key={weekDay}>
                        <td className={cnContributionsCollection('label')}>
                            <span style={{ clipPath: 'None', position: 'absolute', bottom: -2 }}>
                                {weekDay % 2 === 1 ? moment().weekday(weekDay).format('ddd') : ''}
                            </span>
                        </td>
                        {[...new Array(53).keys()].map((weekNumber) => (
                            <>
                                {weeks[weekNumber].contributionDays?.[weekDay] &&
                                moment(weeks[weekNumber].contributionDays[weekDay].date).isSame(
                                    moment(year, 'YYYY'),
                                    'year',
                                ) ? (
                                    <td
                                        key={`${weekNumber}_${weekDay}`}
                                        className={cnContributionsCollection('day')}
                                        style={{
                                            backgroundColor: weeks[weekNumber].contributionDays[weekDay].color,
                                        }}
                                        title={`${
                                            weeks[weekNumber].contributionDays[weekDay].contributionCount
                                                ? weeks[weekNumber].contributionDays[weekDay].contributionCount
                                                : 'No'
                                        } contributions on ${moment(
                                            weeks[weekNumber].contributionDays[weekDay].date,
                                        ).format('dddd, MMMM D, YYYY')}`}
                                    ></td>
                                ) : (
                                    <td />
                                )}
                            </>
                        ))}
                    </tr>
                ))}
            </tbody>
        </table>
    </div>
));

export default ContributionsCollection;
